@charset 'utf-8';

@font-face {
  font-family: Roboto;
  src: url(./Roboto-Medium.woff2) format('woff2');
}

html {
  font-size: 16px;
  height: 100%;
}

body {
  --color-primary: 33, 150, 243;
  --color-accent: 33, 150, 243;
  --color-background: #FAFAFA;
  --color-background-bar: #F5F5F5;
  --color-background-card: #FFFFFF;
  --color-border: rgba(0, 0, 0, .12);
  --color-icon: rgba(0, 0, 0, .54);
  --color-text: rgba(0, 0, 0, .87);
  --color-text-secondary: rgba(0, 0, 0, .6);
  --color-text-disabled: rgba(0, 0, 0, .38);
  --color-ripple: rgba(0, 0, 0, .14);
}

body[theme=dark] {
  --color-primary: 32, 32, 32;
  --color-accent: 128, 203, 196;
  --color-background: #303030;
  --color-background-bar: #383838;
  --color-background-card: #424242;
  --color-border: rgba(255, 255, 255, .12);
  --color-icon: rgba(255, 255, 255, 1);
  --color-text: rgba(255, 255, 255, 1);
  --color-text-secondary: rgba(255, 255, 255, .70);
  --color-text-disabled: rgba(255, 255, 255, .50);
  --color-ripple: rgba(255, 255, 255, .4);
}

body {
  background: var(--color-background);
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  color: var(--color-text);
  font-weight: 400;
  margin: 0;
  font-size: .9rem;
  font-family: Roboto, Noto Sans, -apple-system, BlinkMacSystemFont, sans-serif;
  transition: background .2s;
}

* {
  outline: none;
  -webkit-tap-highlight-color: transparent;
}

::selection {
  background: rgba(var(--color-accent));
  color: #fff;
}

:not(:defined) {
  display: none;
}


@media (prefers-color-scheme: dark) {
  body[theme=auto] {
    --color-primary: 32, 32, 32;
    --color-accent: 128, 203, 196;
    --color-background: #303030;
    --color-background-bar: #383838;
    --color-background-card: #424242;
    --color-border: rgba(255, 255, 255, .12);
    --color-icon: rgba(255, 255, 255, 1);
    --color-text: rgba(255, 255, 255, 1);
    --color-text-secondary: rgba(255, 255, 255, .70);
    --color-text-disabled: rgba(255, 255, 255, .50);
    --color-ripple: rgba(255, 255, 255, .4);
  }
}